<template>
	<div id="">
		<div id="" class="head">
			<van-row>
				<van-col span="24">
					<van-row>
						<van-col span="12">
							<h2>购物车</h2>
						</van-col>
						<van-col span="4" offset="8" class="head_management">
							管理
						</van-col>
					</van-row>
				</van-col>
				<van-col span="24" class="num">
					共{{list.length}}件宝贝
				</van-col>
			</van-row>
		</div>

		<van-row>
			<van-col span="24" v-for="(item,index) in list">
				<van-swipe-cell>
					<van-row class="line">
						<van-col span="2" offset="1" class="line_radio">
							<!-- <van-radio-group>
								<van-radio v-model="radio" ></van-radio>
							</van-radio-group> -->
							<input type="radio" v-model="radios" style="width: 25px;height: 30px;" @change="click_radio(index+1)" />
						</van-col>
						<van-col span="7">
							<van-image width="100%" height="15vh" :src="http+item.goods_img" class="line_image" />
						</van-col>
						<van-col span="10" offset="1" class="line_text">
							<van-row style="text-align: left;">
								<van-col span="24">
									<h3 class="goods_naem">
										{{item.goods_name}}
									</h3>
								</van-col>
								<van-col span="24" class="sku_sname">
									{{item.sku_sname}}
								</van-col>
								<van-col span="24" class="line_text_price">
									<span style="font-size: 12px;">￥</span> {{item.price}}
								</van-col>
							</van-row>
						</van-col>
						<van-col span="2" style="margin-top: 3vh;">
							<van-row>
								<van-col span="24" class="securities" style="">
									领劵
								</van-col>
								<van-col span="24" style="margin-top: 2.5625rem;">
									<span class="number">x{{item.number}}</span>
								</van-col>
							</van-row>
						</van-col>
					</van-row>
					<template #right>
						<van-button square type="danger" text="删除" id="delete" @click="Delete(item.id)" />
						<van-button square type="primary" text="收藏" id="Collection" />
					</template>
				</van-swipe-cell>
			</van-col>
		</van-row>
		<van-row class="buttom">
			<van-col span="24"></van-col>
		</van-row>
	</div>

</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		props: {
			list: {
				default: () => []
			}
		},
		data() {
			return {
				http: 'https://img.9lele.com',
				radios: [],
				
			}
		},
		created() {

		},
		methods: {
			Delete(id){
				console.log(id,"id")
				this.$store.dispatch('user/VuexShoppingDelete',id)
				.then(e => {
					console.log(e.data.data,'delete');
					this.$emit('lists')//子组件使用父组件的方法
					// this.$emit('total_prices')//调用计算总价
				})
			},
			click_radio(index){
				// if(this.radios.length==this.list.length){
					
				// }
			}
		}
	}
</script>

<style>
	#delete {
		height: 100%;
	}

	#Collection {
		height: 100%;
	}

	.head {
		width: 96%;
		height: 8vh;
		margin-left: 2%;
		margin-top: 20px;
		text-align: left;
	}

	.head_management {
		font-size: 10px;
		margin-top: 0.3125rem;
	}

	.num {
		font-size: 10px;
		margin-top: 10px;
	}

	.line {
		width: 96%;
		margin-left: 2%;
		height: 18vh;
		border-radius: 10px;
		margin-top: 2vh;
		box-shadow: 1px -1px 0.25rem #ccc;
	}

	.line_radio {
		margin-top: 6vh;
	}

	.line_image {
		margin-top: 0.625rem;
	}

	.line_text {
		line-height: 4vh;
		margin-top: 3vh;
	}

	.line_text_price {
		color: #F02C2C;
		font-weight: 600;
		font-size: 20px;
	}

	.number {
		border: #39A9ED solid 1px;
		border-radius: 2px;
	}

	/* 领劵 */
	.securities {
		color: #B8B8B8;
		font-size: 12px;
		margin-top: 0.375rem;
	}

	.buttom {
		height: 6.875rem;
	}

	.goods_naem {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 5vh;
		text-align: center;
	}

	.sku_sname {
		height: 1.75rem;
		color: #B8B8B8;
		font-size: 12px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: 5vh;
	}
</style>
